<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import MainHead from '@/components/MainHead.vue'
</script>
<template>
    <div class="common-layout">
      <MainHead/>
      <el-container>
        <el-main style="padding: 0;">
            <div class="block text-center mycarousel">
                <el-carousel height="300px" motion-blur>
                <el-carousel-item v-for="item in 4" :key="item">
                    <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
                </el-carousel-item>
                </el-carousel>
            </div>
            <div class="maincon">
                学生系统用于管理学生信息，课程资料，如提交作业，批改作业。<br>
                只管努力拼搏<br>
                静待花开

            </div>
    </el-main>
      </el-container>
    </div>
  </template>
  <style scoped>
  a {
    text-decoration: none;
    color: black;
  }
  .maincon {
    height: 100vh;
    text-align: center;
    /* background-image: url(../../public/bg1.png); */
    background-size: cover;

  }
  .el-carousel__item h3 {
  /* color: #475669; */
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
  background-image: url(../../public/carousel1.jpg);
  background-size: cover;
}

.el-carousel__item:nth-child(2n) {
  /* background-color: #99a9bf; */
  background-image: url(../../public/carousel2.jpg);
  background-size: cover;
}

.el-carousel__item:nth-child(2n + 1) {
  /* background-color: #d3dce6; */
  background-image: url(../../public/carousel3.jpg);
  background-size: cover;
}
  </style>
  